import Header from './components/Header/index.jsx';
import BottomNav from './components/BottomNav/index.jsx';

//页面组件
class Main extends React.Component {
  state = {
    navData: ['第一', '第二', '第三', '第四']
  };

  render() {
    return (
      <div>
        {/* children -> slot */}
        <Header>这是标题</Header>
        <div style={{ marginTop: 88 + 'px' }}>
          <button onClick={() => this.props.themeChange('black')}>Black</button>
          <button onClick={() => this.props.themeChange('orange')}>
            Orange
          </button>
          <button onClick={() => this.props.themeChange('red')}>Red</button>
          <button onClick={() => this.props.themeChange('purple')}>
            Purple
          </button>
        </div>
        <BottomNav navData={this.state.navData}></BottomNav>
      </div>
    );
  }
}

export default Main;
